<template>
    <apply-dialog class="ruleForm" :title="props.title" :show="props.show" @close="close" @submit="submit">
        <el-form :model="applyData" :rules="rules" ref="roleForm" label-width="100">
            <el-form-item label="休假类型" prop="applyType">
                <el-select v-model="applyData.applyType">
                    <el-option :value="1" :label="ApplyType[1]"></el-option>
                    <el-option :value="2" :label="ApplyType[2]"></el-option>
                    <el-option :value="3" :label="ApplyType[3]"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="休假时间" required>
                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="startTime">
                            <el-date-picker @change="(val:Date)=>handleDateChange('startTime',val)"
                                v-model="applyData.startTime" type="date" placeholder="选择开始日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1">
                        <div class="sign">-</div>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="endTime">
                            <el-date-picker @change="(val:Date)=>handleDateChange('endTime',val)"
                                v-model="applyData.endTime" type="date" placeholder="选择结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="休假时长" prop="leaveTime">
                <span>{{applyData.leaveTime}}天</span>
            </el-form-item>
            <el-form-item label="休假原因" prop="reasons" required>
                <el-input v-model="applyData.reasons" type="textarea" :rows="3" placeholder="请输入休假原因"></el-input>
            </el-form-item>
        </el-form>
    </apply-dialog>
</template>

<script setup lang='ts'>
import { ref, reactive, watch, computed, PropType, nextTick } from 'vue'
import { ApplyState, ApplyType } from "@/utils/enum"
import useCurrentInstance from "@/hook/useCurrentInstance"
import applyDialog from "@/components/Dialog.vue"
import type { FormInstance, FormRules } from "element-plus"

const props = defineProps({
    show: {
        type: Boolean,
        default: true,
        required: true
    },
    title: {
        type: String,
        default: '新增菜单',
        required: true
    },
    leaveFormData: Object,
    // type: String
})
let applyData = ref({
    applyType: '',
    startTime: '',
    endTime: '',
    leaveTime: 0,
    reasons: ''
})

const { globalProperties: that } = useCurrentInstance()
const handleDateChange = (type: 'endTime' | 'startTime', val: Date) => {
    console.log(Object.prototype.toString.call(val))
    const startTime = applyData.value.startTime
    const endTime = applyData.value.endTime
    if (!startTime || !endTime) return
    if (startTime > endTime) {
        that.$message.error("开始日期不能晚于结束日期")
        applyData.value.leaveTime = 0
        setTimeout(() => {
            applyData.value[type] = ""
        }, 0)
    } else {
        console.log(Number(endTime) - Number(startTime))
        applyData.value.leaveTime = ((Number(endTime) - Number(startTime)) / (24 * 60 * 60 * 1000))
    }
}

// 表单设置
const roleForm = ref<FormInstance>()
const rules = reactive<FormRules>({
    applyType: [{ required: true, message: '请选择休假类型', trigger: ['blur', 'change'] }],
    startTime: [{ required: true, message: '请选择开始时间', trigger: ['blur', 'change'] }],
    endTime: [{ required: true, message: '请选择结束时间', trigger: ['blur', 'change'] }],
    reasons: [{ required: true, message: '请输入请假原因', trigger: 'blur' }],
})

const emits = defineEmits(["close", "submit"])
const close = () => {
    roleForm.value?.resetFields()
    emits("close")
}
const submit = () => {
    roleForm.value?.validate((valid: boolean) => {
        if (valid) {
            const params = Object.assign({}, applyData.value)
            emits("submit", params)
            setTimeout(() => {
                close()
            }, 0)
        }
    })
}
</script>
<style lang='scss' scoped>
.sign {
    display: flex;
    justify-content: center;
}
</style>